<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllImg } from '@/api/homemanage';
import router from '../router';
import { getByTypeService } from '@/api/notice'
import { useRouter } from 'vue-router'


const router2 = useRouter()

const tableData = reactive([])

async function getTable() {
  tableData.length = 0
  let images = await (await getAllImg()).data
  // tableData.push(images.data)
  for (let i = 0; i < images.length; i++) {
    // console.log(res.data[i])
    tableData.push(images[i])
  }
  // console.log(tableData)
}
getTable()

const toLogin = () => {
  router.push('/login')
}

const toAdRequest = () => {
  router.push('/adRequest')
}

const noticeList1 = reactive([])
const noticeList2 = reactive([])
// const total = ref(0)

async function getList() {
  noticeList1.length = 0
  noticeList2.length = 0
  let result1 = await getByTypeService("公告",1, 7)
  // total.value = result.data.total
  for (let i = 0; i < result1.data.items.length; i++) {
    if (result1.data.items[i].status === 0) {
      continue
    }
    result1.data.items[i].time = result1.data.items[i].time.slice(0, 10)
    noticeList1.push(result1.data.items[i])
  }
  let result2 = await getByTypeService("通知",1, 6)
  // total.value = result.data.total
  for (let i = 0; i < result2.data.items.length; i++) {
    if (result2.data.items[i].status === 0) {
      continue
    }
    result2.data.items[i].time = result2.data.items[i].time.slice(0, 10)
    noticeList2.push(result2.data.items[i])
  }
}
getList()

const showNotice = (id) => {
  router2.push({path:'/notice',query:{'id':id,'type':null} })
}

</script>


<template>
  <div>
    <el-container>
      <el-header style="padding: 0;">
        <div
          style="height: 60px;line-height: 60px;border-bottom: 1px solid #ccc;background-color:rgb(19, 179, 232);display: flex;">
          <img src="../../public/logo.png" style="width: 145px;height: 30px;margin-top: 15px;margin-left: 20px;">
          <div style="flex: 1;"></div>
          <div style="margin-right: 30px;">
            <span style="color: white;cursor: pointer;font-size: 17px;margin-right: 40px;" @click="toLogin">登 录</span>
            <span style="color: white;cursor: pointer;font-size: 17px;" @click="toAdRequest">商务合作</span>
          </div>
        </div>
      </el-header>
      <el-main style="padding: 0;">
        <el-container>
          <el-header style="height: 400px;padding: 0;">
            <div>
              <el-carousel height="400px" style="width:100%;text-align: center;" motion-blur>
                <el-carousel-item v-for="item in tableData" :key="item">
                  <template #default="scope">
                    <el-image style="" :src="item.url" :preview-src-list="[item.url]" preview-teleported="true" />
                  </template>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-header>

          <el-main style="padding: 30px;height: calc(100vh - 460px);">
            <div style="width: 40%;float: left;padding-left: 80px;">
              <h2 style="display:inline;">公告要闻</h2>
              <router-link style="width: 40px;margin-left: calc(100% - 56px);" :to="{path:'/moreNotice',query:{type:'公告'}}">更多>></router-link>
              <!-- <router-link :to="{path:'/page1',query:{username}}">page1</router-link> -->
              <div style="border:1px solid #CCC;margin-top: 4px;margin-bottom: 8px;"></div>
              <div v-for="item in noticeList1">
                <!-- <div v-if="item.type === '公告'"> -->
                  <el-link style="font-size: 17px;padding: 5px;" @click="showNotice(item.id)">{{ item.tittle }}</el-link>
                  <span style="font-size: 15px;float:right;padding-right: 5px;">{{ item.time }}</span>
                <!-- </div> -->
              </div>
            </div>
            <div style="margin-left: 60%;width: 35%;">
              <h2 style="display:inline;">通知</h2>
              <router-link style="width: 40px;margin-left: calc(100% - 56px);" :to="{path:'/moreNotice',query:{type:'通知'}}">更多>></router-link>
              <!-- <a style="width: 40px;margin-left: calc(100% - 56px);">更多>></a> -->
              <div style="border:1px solid #CCC;margin-top: 4px;margin-bottom: 8px;"></div>
              <div v-for="item in noticeList2">
                <!-- <div v-if="item.type === '通知'"> -->
                  <el-link style="font-size: 17px;padding: 5px;" @click="showNotice(item.id)">{{ item.tittle }}</el-link>
                  <span style="font-size: 15px;float:right;padding-right: 5px;">{{ item.time }}</span>
                <!-- </div> -->
              </div>
            </div>
          </el-main>
		  
        </el-container>
      </el-main>

      <el-footer style="text-align: center;color: gray;">
        <p>版权所有：@平安物业(PinganProperty)</p>
        <p>地址：江西省南昌市北京西路437号</p>
        <p>联系方式：0791-888888</p>
      </el-footer>
    </el-container>
  </div>

</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff00;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff00;
}

a {
  text-decoration: none;
  color: black;
}
</style>